<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test20</title>
	<style>
		body {
			background-color: black;
			margin: 0px;
		}
		#d0 {
			height: 100vh;
			width: 100vw;
			overflow-x: scroll;
		}
		::-webkit-scrollbar {
			height: 10px;
			width: 100%;
			background-color: darkcyan;
		}
		::-webkit-scrollbar:hover {
			background-color: orangered;
		}
		::-webkit-scrollbar-thumb {
			border-radius: 5px;
			background-color: aqua;
			transition: 1s;
		}
		::-webkit-scrollbar-thumb:hover {
			background-color: cornflowerblue;
		}
		#d1 {
			display: inline-block;
		}
		#d1d1 {
			display: inline-flex;
		}
		.tasks {
			margin: 0px;
			border: solid slateblue 2px;
			width: 300px;
			height: 100px;
			color: cyan;
			font-size: 30px;
			background-color: rosybrown;
			display: inline-block;
			text-align: center;
		}
		.qk {
			float: left;
			width: 100%;
			font-size: 30px;
			text-align: center;
			color: transparent;
			transition: 1s;
		}
		.tasks:hover .jdbg {
			background-color: transparent;
		}
		.tasks:hover .jd {
			background-color: transparent;
		}
		.tasks:hover .qk {
			color: red;
		}
		.task {
			margin: 0px;
			border: solid slateblue 2px;
			width: 300px;
			height: 100px;
			color: cyan;
			font-size: 30px;
			background-color: olivedrab;
			display: inline-block;
			text-align: center;
		}
		.task:hover .jdbg {
			background-color: transparent;
		}
		.task:hover .jd {
			background-color: transparent;
		}
		.task:hover .qk {
			color: orangered;
		}
		.taskw {
			margin: 0px;
			border: solid slateblue 2px;
			width: 300px;
			height: 100px;
			color: crimson;
			font-size: 30px;
			background-color: aquamarine;
			display: inline-block;
			text-align: center;
		}
		.taskw:hover .jdbg {
			background-color: transparent;
		}
		.taskw:hover .jd {
			background-color: transparent;
		}
		.taskw:hover .qk {
			color: coral;
		}
		.l2taskw
		{
			margin: 0px;
			border: solid teal 5px;
			padding: 8px;
			background-color: orangered;
			color: greenyellow;
			font-size: 50px;
			letter-spacing: 20px;
			text-align: center;
			display: inline;
		}
		.taskwh {
			margin: 0px;
			border: solid slateblue 2px;
			width: 500px;
			height: 100px;
			color: turquoise;
			font-size: 30px;
			background-color: hotpink;
			display: inline-block;
			text-align: center;
			letter-spacing: 0px;
		}
		.taskwh:hover .jdbg {
			background-color: transparent;
		}
		.taskwh:hover .jd {
			background-color: transparent;
		}
		.taskwh:hover .qk {
			color: royalblue;
		}
		.jdbg {
			margin: 2px;
			margin-top: 20px;
			height: 10px;
			width: 98%;
			border-radius: 4px;
			background-color: crimson;
			transition: 1s;
		}
		.jd {
			height: 10px;
			border-radius: 4px;
			background-color: cyan;
			transition: 1s;
		}
		.cb-time
		{
			display: none;
		}
		.tex-time
		{
			height: auto;
			width: 30px;
			font-size: 0px;
			color: cornflowerblue;
			display: inline-flex;
			transition: 1s;
		}
		#bef-now
		{
			background-color: crimson;
		}
		#cb-bef-now:checked+#bef-now
		{
			width: 200px;
			font-size: 40px;
		}
		#now-gkq
		{
			background-color: coral;
		}
		#cb-now-gkq:checked+#now-gkq
		{
			width: 200px;
			font-size: 40px;
		}
		#gkq-gkh
		{
			background-color: khaki;
		}
		#cb-gkq-gkh:checked+#gkq-gkh
		{
			width: 200px;
			font-size: 40px;
		}
		#fj {
			margin-top: 5px;
			height: 20px;
			width: 100%;
			background-color: palegreen;
		}
		#fjd {
			position: relative;
			left: -6px;
			top: 2px;
			height: 16px;
			border-radius: 8px;
			width: var(--wjd);
			background-color: dodgerblue;
		}
		#d2 {
			width: 100%;
			position: relative;
		}
		.event {
			position: absolute;
			width: 20px;
			height: 100px;
			background-color: transparent;
		}
		.tp {
			height: 50px;
			width: 6px;
			background-color: red;
		}
		.etitle {
			position: relative;
			left: -250px;
			margin-top: 250px;
			width: 500px;
			font-size: 20px;
			color: cyan;
			transform: rotate(90deg);
		}
	</style>
</head>
<body>
	<div id="d0">
		<div id="d1">
			<div id="d1d1">
				<div class="tasks">生物笔记
					<div class="jdbg">
						<div class="qk">75%已截止</div>
						<div class="jd" style="width: 75%;"></div>
					</div>
				</div>
				<div style="display: inline-block;">
					<div class="tasks">数学补缺
						<div class="jdbg">
							<div class="qk">95%已截止</div>
							<div class="jd" style="width: 95%;"></div>
						</div>
					</div>
					<br>
					<div class="tasks">化学补缺
						<div class="jdbg">
							<div class="qk">100%已截止</div>
							<div class="jd" style="width: 100%;"></div>
						</div>
					</div>
				</div>
				<div style="display: inline-block;">
					<div class="tasks">生物速回
						<div class="jdbg">
							<div class="qk">1%已截止</div>
							<div class="jd" style="width: 1%;"></div>
						</div>
					</div>
					<br>
					<div class="tasks">物理补缺
						<div class="jdbg">
							<div class="qk">20%已截止</div>
							<div class="jd" style="width: 20%;"></div>
						</div>
					</div>
				</div>
				<div class="tasks">物理电场针对性复习
					<div class="jdbg">
						<div class="qk">10%已截止</div>
						<div class="jd" style="width: 10%;"></div>
					</div>
				</div>
				<input type="checkbox" class="cb-time" id="cb-bef-now">
				<div class="tex-time" id="bef-now">过去-现在</div>
				<div style="display: inline-block;">
					<div class="task">化学笔记
						<div class="jdbg">
							<div class="qk">100%已完成</div>
							<div class="jd" style="width: 100%;"></div>
						</div>
					</div>
					<br>
					<div class="task">化学笔记2期
						<div class="jdbg">
							<div class="qk">15%进行中</div>
							<div class="jd" style="width: 15%;"></div>
						</div>
					</div>
				</div>
				<div>
					<div class="task">数学多项针对性学习
						<div class="jdbg">
							<div class="qk">92%进行中</div>
							<div class="jd" style="width: 92%;"></div>
						</div>
					</div>
					<br>
					<div class="task">数学三项攻坚
						<div class="jdbg">
							<div class="qk">1%进行中</div>
							<div class="jd" style="width: 1%;"></div>
						</div>
					</div>
				</div>
				<div>
					<div class="task">重修英语
						<div class="jdbg">
							<div class="qk">88%进行中</div>
							<div class="jd" style="width: 88%;"></div>
						</div>
					</div>
					<br>
					<div class="task">数学笔记
						<div class="jdbg">
							<div class="qk">65%进行中</div>
							<div class="jd" style="width: 65%;"></div>
						</div>
					</div>
				</div>
				<div class="task">生物笔记第三期
					<div class="jdbg">
						<div class="qk">20%进行中</div>
						<div class="jd" style="width: 20%;"></div>
					</div>
				</div>
				<div style="width: auto;">
					<div class="task" style="width: 800px;">混合增强计划
						<div class="jdbg">
							<div class="qk">6%进行中</div>
							<div class="jd" style="width: 6%;"></div>
						</div>
					</div>
					<br>
					<div style="display: inline-flex;">
						<div class="task">数学进阶
							<div class="jdbg">
								<div class="qk">4%进行中</div>
								<div class="jd" style="width: 4%;"></div>
							</div>
						</div>
						<div class="task">从头学语文
							<div class="jdbg">
								<div class="qk">1%进行中</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
					</div>
				</div>
				<input type="checkbox" class="cb-time" id="cb-now-gkq">
				<div class="tex-time" id="now-gkq">现在-考前</div>
				<div>
					<div style="display: inline-flex;">
						<div class="taskw">物理全扫描
							<div class="jdbg">
								<div class="qk">1%未开始</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
						<div class="taskw">化学进阶
							<div class="jdbg">
								<div class="qk">1%未开始</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
						<div class="taskw">生物进阶
							<div class="jdbg">
								<div class="qk">1%未开始</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
					</div>
					<br>
					<div class="taskw" style="width: 1200px;">船新全科笔记
						<div class="jdbg">
							<div class="qk">1%未开始</div>
							<div class="jd" style="width: 1%;"></div>
						</div>
					</div>
				</div>
				<input type="checkbox" class="cb-time" id="cb-gkq-gkh">
				<div class="tex-time" id="gkq-gkh">高考前-后</div>
				<div class="l2taskw">W-hikari glass<br>
					<div style="display: inline-flex;">
						<div class="taskwh">光学:HUD-tech
							<div class="jdbg">
								<div class="qk">1%未开始</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
						<div class="taskwh">AI:computer vision
							<div class="jdbg">
								<div class="qk">1%未开始</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
						<div class="taskwh">electronic-tech:电路版设计
							<div class="jdbg">
								<div class="qk">1%未开始</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
						<div class="taskwh">AI:语音识别
							<div class="jdbg">
								<div class="qk">1%未开始</div>
								<div class="jd" style="width: 1%;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div id="fj">
				<div id="fjd"></div>
			</div>
		</div>
		<div id="d2">
			<div class="event" style="left: 10px;">
				<div class="tp"></div>
				<div class="etitle">时间结构回调</div>
			</div>
			<div class="event" style="left: 30px;">
				<div class="tp"></div>
				<div class="etitle">安排重整</div>
			</div>
			<div class="event" style="left: 50px;">
				<div class="tp"></div>
				<div class="etitle">时间结构回调计划调整</div>
			</div>
			<div class="event" style="left: 70px;">
				<div class="tp"></div>
				<div class="etitle">时间结构加速回调</div>
			</div>
			<div class="event" style="left: 90px;">
				<div class="tp"></div>
				<div class="etitle">时间结构完全重构</div>
			</div>
			<div class="event" style="left: 140px;">
				<div class="tp"></div>
				<div class="etitle">全计划组提前</div>
			</div>
			<div class="event" style="left: 180px;">
				<div class="tp"></div>
				<div class="etitle">年计划启动</div>
			</div>
			<div class="event" style="left: 210px;">
				<div class="tp"></div>
				<div class="etitle">拓展学习全部截停</div>
			</div>
			<div class="event" style="left: 240px;">
				<div class="tp"></div>
				<div class="etitle">时间结构完全调整至计划内模样</div>
			</div>
			<div class="event" style="left: 300px;">
				<div class="tp"></div>
				<div class="etitle">课内知识缺漏过多紧急插入短期计划</div>
			</div>
			<div class="event" style="left: 400px;">
				<div class="tp"></div>
				<div class="etitle">短期计划效果出乎意料</div>
			</div>
			<div class="event" style="left: 570px;">
				<div class="tp"></div>
				<div class="etitle">身体素质急速下降,动力缓滞</div>
			</div>
			<div class="event" style="left: 600px;">
				<div class="tp"></div>
				<div class="etitle">月级计划组按年计划组安排开始执行</div>
			</div>
			<div class="event" style="left: 650px;">
				<div class="tp"></div>
				<div class="etitle">低重要性计划停滞,开始懈怠</div>
			</div>
			<div class="event" style="left: 680px;">
				<div class="tp"></div>
				<div class="etitle">月级计划停滞</div>
			</div>
			<div class="event" style="left: 740px;">
				<div class="tp"></div>
				<div class="etitle">在执行计划部分取消,放松策略组执行</div>
			</div>
			<div class="event" style="left: 1120px;">
				<div class="tp"></div>
				<div class="etitle">放松策略组最后行动:回调</div>
			</div>
			<div class="event" style="left: 1320px;">
				<div class="tp"></div>
				<div class="etitle">市调研</div>
			</div>
			<div class="event" style="left: 1410px;">
				<div class="tp"></div>
				<div class="etitle">时间结构重整</div>
			</div>
			<div class="event" style="left: 1520px;">
				<div class="tp"></div>
				<div class="etitle">确定现有计划化学笔记,数学学习完成后执行的计划</div>
			</div>
			<div class="event" style="left: 1570px;">
				<div class="tp"></div>
				<div class="etitle">时间结构再重整</div>
			</div>
			<div class="event" style="left: 1610px;">
				<div class="tp"></div>
				<div class="etitle">安排过饱和,出现消极化表现</div>
			</div>
			<div class="event" style="left: 1640px;">
				<div class="tp"></div>
				<div class="etitle">习惯结构调整,时间结构优化</div>
			</div>
			<div class="event" style="left: 1690px;">
				<div class="tp"></div>
				<div class="etitle">过活化引导性调整,日级计划强制性增强</div>
			</div>
			<div class="event" style="left: 1770px;">
				<div class="tp"></div>
				<div class="etitle">日级计划强制性增强</div>
			</div>
			<div class="event" style="left: 1850px;">
				<div class="tp"></div>
				<div class="etitle">集中力记忆力降幅过大,调配1小时到睡眠时间</div>
			</div>
			<div class="event" style="left: 1910px;">
				<div class="tp"></div>
				<div class="etitle">计划强制性再加强</div>
			</div>
		</div>
	</div>
</body>
<script>
	document.getElementById('cb-bef-now').checked=true;
	document.getElementById('cb-now-gkq').checked=true;
	document.getElementById('cb-gkq-gkh').checked=true;
	document.getElementById('d0').onscroll=function(e){
		scrl=document.getElementById('d0').scrollLeft;
		if(scrl+document.body.clientWidth/2>document.getElementById("bef-now").offsetLeft)
		{
			document.getElementById('cb-bef-now').checked=false;
		}
		else
		{
			document.getElementById('cb-bef-now').checked=true;
		}
		if(scrl+document.body.clientWidth/2>document.getElementById("now-gkq").offsetLeft)
		{
			document.getElementById('cb-now-gkq').checked=false;
		}
		else
		{
			document.getElementById('cb-now-gkq').checked=true;
		}
		if(scrl+document.body.clientWidth/2>document.getElementById("gkq-gkh").offsetLeft)
		{
			document.getElementById('cb-gkq-gkh').checked=false;
		}
		else
		{
			document.getElementById('cb-gkq-gkh').checked=true;
		}
		let offset = scrl+document.body.clientWidth/2;
		document.getElementById("fjd").style.setProperty('--wjd', `${offset}px`);
	}
</script>
</html>